<template>
  <view><WfallList :list="list" ref="wfalls" @finishLoad="getLoadNum"></WfallList></view>
</template>

<script>
import WfallList from '@/components/wfalls-flow/wfall-list';
const list = require('@/static/wfalls-flow/data.json').list;
export default {
  components: { WfallList },
  data() {
    return {
      list: [],
      isNewRenderDone: false //锁的作用
    };
  },
  methods: {
    getLoadNum(num) {
      console.log('共加载了:' + num);
      !this.isNewRenderDone && uni.hideLoading();
      this.isNewRenderDone = true;
    }
  },
  onLoad() {
    // 模拟首次加载列表数据
    setTimeout(() => {
      this.list = list;
      this.$refs.wfalls.init();
    }, 1000);
  },
  onReachBottom() {
    console.log('onReachBottom');
    // 加锁，避免在加载更多时用户频繁下拉导致的重复触发而渲染异常
    if (!this.isNewRenderDone) return;
    this.isNewRenderDone = false;
    uni.showLoading({ title: '正在加载更多' });
    // 模拟分页请求 (加载更多)
    setTimeout(() => {
      const nextData = JSON.parse(JSON.stringify(this.list.slice(0, 10)));
      this.list.push(...nextData);
      // this.$nextTick(()=>{
      //     this.$refs.wfalls.handleViewRender();
      // })
      // APP上触发不了还是setTimeout万能
      setTimeout(() => {
        this.$refs.wfalls.handleViewRender();
      }, 0);
    }, 800);
  },
  onPullDownRefresh() {
    // 模拟更新新数据
    const newData = JSON.parse(JSON.stringify(this.list.slice(0, 10)));
    setTimeout(() => {
      this.list = newData;
      this.$refs.wfalls.init();
      uni.stopPullDownRefresh();
      uni.showToast({ title: '刷新成功', icon: 'none' });
    }, 800);
  }
};
</script>
